<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪里开简易预约制访客管理系统 V1.0</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .animate-fade-in {
            animation: fadeIn 0.6s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="min-h-screen bg-base-200">
<!-- 导航栏 -->
<div class="navbar bg-base-100 shadow-lg">
    <div class="navbar-start">
        <div class="dropdown">
            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
                </svg>
            </div>
            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                <li><a onclick="showHome()">首页</a></li>
                <li><a onclick="showLogin('admin')">系统管理</a></li>
                <li><a onclick="showLogin('student')">学生入口</a></li>
                <li><a onclick="showLogin('guard')">门卡管理</a></li>
            </ul>
        </div>
        <a class="btn btn-ghost text-xl">
            <i class="fas fa-users text-primary"></i>
            访客管理系统
        </a>
    </div>
    <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
            <li><a onclick="showHome()" class="btn btn-ghost">首页</a></li>
            <li><a onclick="showLogin('admin')" class="btn btn-ghost">系统管理</a></li>
            <li><a onclick="showLogin('student')" class="btn btn-ghost">学生入口</a></li>
            <li><a onclick="showLogin('guard')" class="btn btn-ghost">门卡管理</a></li>
        </ul>
    </div>
    <div class="navbar-end">
        <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
                <i class="fas fa-user"></i>
            </div>
            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                <li><a onclick="showHelp()">使用帮助</a></li>
                <li><a onclick="showAbout()">关于系统</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 主内容区域 -->
<div class="container mx-auto px-4 py-8">
    <!-- 首页 -->
    <div id="home-page" class="animate-fade-in">
        <div class="hero min-h-96 gradient-bg rounded-3xl mb-8">
            <div class="hero-content text-center text-white">
                <div class="max-w-md">
                    <h1 class="mb-5 text-5xl font-bold">访客管理系统</h1>
                    <p class="mb-5">基于PHP7+MySQL5.6的封闭校区访客管理系统，支持预约制访客申请、核销流程管理</p>
                    <button class="btn btn-primary btn-lg" onclick="showLogin('student')">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        立即使用
                    </button>
                </div>
            </div>
        </div>

        <!-- 功能模块卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="card bg-base-100 shadow-xl card-hover">
                <div class="card-body text-center">
                    <div class="text-4xl text-primary mb-4">
                        <i class="fas fa-cog"></i>
                    </div>
                    <h2 class="card-title justify-center">系统管理</h2>
                    <p>管理学生信息、访客记录，系统设置配置</p>
                    <div class="card-actions justify-center">
                        <button class="btn btn-primary" onclick="showLogin('admin')">进入管理</button>
                    </div>
                </div>
            </div>

            <div class="card bg-base-100 shadow-xl card-hover">
                <div class="card-body text-center">
                    <div class="text-4xl text-secondary mb-4">
                        <i class="fas fa-user-graduate"></i>
                    </div>
                    <h2 class="card-title justify-center">学生申请</h2>
                    <p>提交访客申请，查看历史记录，管理访客信息</p>
                    <div class="card-actions justify-center">
                        <button class="btn btn-secondary" onclick="showLogin('student')">学生登录</button>
                    </div>
                </div>
            </div>

            <div class="card bg-base-100 shadow-xl card-hover">
                <div class="card-body text-center">
                    <div class="text-4xl text-accent mb-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h2 class="card-title justify-center">门卡管理</h2>
                    <p>核销访客码，管理访客进出记录</p>
                    <div class="card-actions justify-center">
                        <button class="btn btn-accent" onclick="showLogin('guard')">门卫登录</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统特性 -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title text-2xl mb-6">
                    <i class="fas fa-star text-warning"></i>
                    系统特性
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="flex items-start space-x-3">
                        <div class="text-primary text-xl">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">移动端适配</h3>
                            <p class="text-sm text-gray-600">支持手机端和电脑端访问，响应式设计</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="text-secondary text-xl">
                            <i class="fas fa-calendar-check"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">预约制管理</h3>
                            <p class="text-sm text-gray-600">预先提交访客信息，无需审核流程</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="text-accent text-xl">
                            <i class="fas fa-qrcode"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">访客码系统</h3>
                            <p class="text-sm text-gray-600">匿名制访客码，门卫扫码核销</p>
                        </div>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="text-warning text-xl">
                            <i class="fas fa-users-cog"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold">多角色管理</h3>
                            <p class="text-sm text-gray-600">系统管理员、学生、门卡管理员分权限管理</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录页面 -->
    <div id="login-page" class="hidden animate-fade-in">
        <div class="max-w-md mx-auto">
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title justify-center text-2xl mb-6">
                        <i id="login-icon" class="fas fa-sign-in-alt text-primary mr-2"></i>
                        <span id="login-title">用户登录</span>
                    </h2>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">账号</span>
                        </label>
                        <input type="text" id="username" placeholder="请输入账号" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">密码</span>
                        </label>
                        <input type="password" id="password" placeholder="请输入密码" class="input input-bordered" />
                    </div>

                    <div class="form-control mt-6">
                        <button class="btn btn-primary" onclick="handleLogin()">
                            <i class="fas fa-sign-in-alt mr-2"></i>
                            登录
                        </button>
                    </div>

                    <div class="divider">默认账户</div>

                    <div class="text-sm space-y-2">
                        <div class="flex justify-between">
                            <span>系统管理员:</span>
                            <span class="font-mono">admin/123456</span>
                        </div>
                        <div class="flex justify-between">
                            <span>学生示例:</span>
                            <span class="font-mono">S001/S001</span>
                        </div>
                        <div class="flex justify-between">
                            <span>门卡管理员:</span>
                            <span class="font-mono">M001/M001</span>
                        </div>
                    </div>

                    <div class="card-actions justify-center mt-4">
                        <button class="btn btn-ghost btn-sm" onclick="showHome()">
                            <i class="fas fa-arrow-left mr-1"></i>
                            返回首页
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 系统管理页面 -->
    <div id="admin-page" class="hidden animate-fade-in">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold">
                <i class="fas fa-cog text-primary mr-2"></i>
                系统管理
            </h1>
            <button class="btn btn-ghost" onclick="logout()">
                <i class="fas fa-sign-out-alt mr-2"></i>
                退出登录
            </button>
        </div>

        <!-- 管理功能选项卡 -->
        <div class="tabs tabs-boxed mb-6">
            <a class="tab tab-active" onclick="showAdminTab('students')">学生管理</a>
            <a class="tab" onclick="showAdminTab('visitors')">访客管理</a>
            <a class="tab" onclick="showAdminTab('settings')">系统设置</a>
            <a class="tab" onclick="showAdminTab('import')">数据导入</a>
        </div>

        <!-- 学生管理 -->
        <div id="admin-students" class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="card-title">学生信息管理</h2>
                    <button class="btn btn-primary btn-sm" onclick="showAddStudentModal()">
                        <i class="fas fa-plus mr-2"></i>
                        添加学生
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>电话</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="students-table">
                        <tr>
                            <td>S001</td>
                            <td>张三</td>
                            <td>13800138001</td>
                            <td><span class="badge badge-primary">学生</span></td>
                            <td><span class="badge badge-success">启用</span></td>
                            <td>
                                <button class="btn btn-ghost btn-xs">编辑</button>
                                <button class="btn btn-ghost btn-xs text-error">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>S002</td>
                            <td>李四</td>
                            <td>13800138002</td>
                            <td><span class="badge badge-primary">学生</span></td>
                            <td><span class="badge badge-success">启用</span></td>
                            <td>
                                <button class="btn btn-ghost btn-xs">编辑</button>
                                <button class="btn btn-ghost btn-xs text-error">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 访客管理 -->
        <div id="admin-visitors" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">访客记录管理</h2>

                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                        <tr>
                            <th>访客码</th>
                            <th>申请学生</th>
                            <th>访客姓名</th>
                            <th>目标宿舍</th>
                            <th>到访日期</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="visitors-table">
                        <tr>
                            <td><span class="font-mono text-primary">V20250612001</span></td>
                            <td>张三(S001)</td>
                            <td>王五</td>
                            <td>A栋301</td>
                            <td>2025-06-12</td>
                            <td><span class="badge badge-warning">待核销</span></td>
                            <td>
                                <button class="btn btn-ghost btn-xs">查看</button>
                                <button class="btn btn-ghost btn-xs text-error">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="font-mono text-success">V20250611001</span></td>
                            <td>李四(S002)</td>
                            <td>赵六</td>
                            <td>B栋205</td>
                            <td>2025-06-11</td>
                            <td><span class="badge badge-success">已核销</span></td>
                            <td>
                                <button class="btn btn-ghost btn-xs">查看</button>
                                <button class="btn btn-ghost btn-xs text-error">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 系统设置 -->
        <div id="admin-settings" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">系统设置</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">系统名称</span>
                        </label>
                        <input type="text" value="雪里开访客管理系统" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">联系邮箱</span>
                        </label>
                        <input type="email" value="15058593138@qq.com" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">访客码前缀</span>
                        </label>
                        <input type="text" value="V" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">最大访客数量</span>
                        </label>
                        <input type="number" value="100" class="input input-bordered" />
                    </div>
                </div>

                <div class="card-actions justify-end mt-6">
                    <button class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i>
                        保存设置
                    </button>
                </div>
            </div>
        </div>

        <!-- 数据导入 -->
        <div id="admin-import" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">学生信息导入</h2>

                <div class="alert alert-info mb-4">
                    <i class="fas fa-info-circle"></i>
                    <span>支持Excel文件导入，请确保文件格式正确：学号、姓名、电话</span>
                </div>

                <div class="form-control">
                    <label class="label">
                        <span class="label-text">选择Excel文件</span>
                    </label>
                    <input type="file" class="file-input file-input-bordered" accept=".xlsx,.xls" />
                </div>

                <div class="card-actions justify-end mt-6">
                    <button class="btn btn-primary">
                        <i class="fas fa-upload mr-2"></i>
                        开始导入
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 学生页面 -->
    <div id="student-page" class="hidden animate-fade-in">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold">
                <i class="fas fa-user-graduate text-secondary mr-2"></i>
                学生中心
            </h1>
            <button class="btn btn-ghost" onclick="logout()">
                <i class="fas fa-sign-out-alt mr-2"></i>
                退出登录
            </button>
        </div>

        <!-- 学生功能选项卡 -->
        <div class="tabs tabs-boxed mb-6">
            <a class="tab tab-active" onclick="showStudentTab('apply')">申请访客</a>
            <a class="tab" onclick="showStudentTab('history')">历史记录</a>
            <a class="tab" onclick="showStudentTab('profile')">个人信息</a>
        </div>

        <!-- 申请访客 -->
        <div id="student-apply" class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-plus-circle text-primary mr-2"></i>
                    申请访客
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">访客姓名 *</span>
                        </label>
                        <input type="text" id="visitor-name" placeholder="请输入访客姓名" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">访客电话 *</span>
                        </label>
                        <input type="tel" id="visitor-phone" placeholder="请输入访客电话" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">目标宿舍 *</span>
                        </label>
                        <input type="text" id="visitor-room" placeholder="如：A栋301" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">到访日期 *</span>
                        </label>
                        <input type="date" id="visitor-date" class="input input-bordered" />
                    </div>
                </div>

                <div class="form-control mt-4">
                    <label class="label">
                        <span class="label-text">到访事由 *</span>
                    </label>
                    <textarea id="visitor-reason" class="textarea textarea-bordered" placeholder="请详细说明到访事由"></textarea>
                </div>

                <div class="card-actions justify-end mt-6">
                    <button class="btn btn-primary" onclick="submitVisitorApplication()">
                        <i class="fas fa-paper-plane mr-2"></i>
                        提交申请
                    </button>
                </div>
            </div>
        </div>

        <!-- 历史记录 -->
        <div id="student-history" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-history text-info mr-2"></i>
                    访客历史记录
                </h2>

                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                        <tr>
                            <th>访客码</th>
                            <th>访客姓名</th>
                            <th>目标宿舍</th>
                            <th>到访日期</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="student-history-table">
                        <tr>
                            <td><span class="font-mono text-primary">V20250612001</span></td>
                            <td>王五</td>
                            <td>A栋301</td>
                            <td>2025-06-12</td>
                            <td><span class="badge badge-warning">待核销</span></td>
                            <td>
                                <button class="btn btn-ghost btn-xs" onclick="showVisitorCode('V20250612001')">查看访客码</button>
                            </td>
                        </tr>
                        <tr>
                            <td><span class="font-mono text-success">V20250611001</span></td>
                            <td>赵六</td>
                            <td>A栋301</td>
                            <td>2025-06-11</td>
                            <td><span class="badge badge-success">已核销</span></td>
                            <td>
                                <button class="btn btn-ghost btn-xs">查看详情</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 个人信息 -->
        <div id="student-profile" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-user text-accent mr-2"></i>
                    个人信息
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">学号</span>
                        </label>
                        <input type="text" value="S001" class="input input-bordered" readonly />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">姓名</span>
                        </label>
                        <input type="text" value="张三" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">电话</span>
                        </label>
                        <input type="tel" value="13800138001" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">新密码</span>
                        </label>
                        <input type="password" placeholder="留空则不修改" class="input input-bordered" />
                    </div>
                </div>

                <div class="card-actions justify-end mt-6">
                    <button class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i>
                        保存修改
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 门卡管理页面 -->
    <div id="guard-page" class="hidden animate-fade-in">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold">
                <i class="fas fa-shield-alt text-accent mr-2"></i>
                门卡管理
            </h1>
            <button class="btn btn-ghost" onclick="logout()">
                <i class="fas fa-sign-out-alt mr-2"></i>
                退出登录
            </button>
        </div>

        <!-- 门卡功能选项卡 -->
        <div class="tabs tabs-boxed mb-6">
            <a class="tab tab-active" onclick="showGuardTab('verify')">访客核销</a>
            <a class="tab" onclick="showGuardTab('records')">核销记录</a>
            <a class="tab" onclick="showGuardTab('profile')">个人信息</a>
        </div>

        <!-- 访客核销 -->
        <div id="guard-verify" class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-qrcode text-primary mr-2"></i>
                    访客核销
                </h2>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <div class="form-control mb-4">
                            <label class="label">
                                <span class="label-text">访客码</span>
                            </label>
                            <div class="join">
                                <input type="text" id="visitor-code-input" placeholder="请输入或扫描访客码" class="input input-bordered join-item flex-1" />
                                <button class="btn btn-primary join-item" onclick="verifyVisitorCode()">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            <span>请输入访客提供的访客码进行核销验证</span>
                        </div>
                    </div>

                    <div id="visitor-info" class="hidden">
                        <div class="card bg-base-200">
                            <div class="card-body">
                                <h3 class="card-title text-lg">访客信息</h3>
                                <div class="space-y-2">
                                    <div class="flex justify-between">
                                        <span>访客姓名:</span>
                                        <span id="verify-visitor-name" class="font-semibold">-</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span>访客电话:</span>
                                        <span id="verify-visitor-phone" class="font-semibold">-</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span>申请学生:</span>
                                        <span id="verify-student-name" class="font-semibold">-</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span>目标宿舍:</span>
                                        <span id="verify-room" class="font-semibold">-</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span>到访日期:</span>
                                        <span id="verify-date" class="font-semibold">-</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span>到访事由:</span>
                                        <span id="verify-reason" class="font-semibold">-</span>
                                    </div>
                                </div>
                                <div class="card-actions justify-end mt-4">
                                    <button class="btn btn-success" onclick="confirmVerification()">
                                        <i class="fas fa-check mr-2"></i>
                                        确认核销
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 核销记录 -->
        <div id="guard-records" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-list text-info mr-2"></i>
                    核销记录
                </h2>

                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                        <tr>
                            <th>访客码</th>
                            <th>访客姓名</th>
                            <th>申请学生</th>
                            <th>目标宿舍</th>
                            <th>核销时间</th>
                            <th>核销人员</th>
                        </tr>
                        </thead>
                        <tbody id="guard-records-table">
                        <tr>
                            <td><span class="font-mono text-success">V20250611001</span></td>
                            <td>赵六</td>
                            <td>李四(S002)</td>
                            <td>B栋205</td>
                            <td>2025-06-11 14:30:25</td>
                            <td>M001</td>
                        </tr>
                        <tr>
                            <td><span class="font-mono text-success">V20250610001</span></td>
                            <td>钱七</td>
                            <td>张三(S001)</td>
                            <td>A栋301</td>
                            <td>2025-06-10 16:15:10</td>
                            <td>M001</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 个人信息 -->
        <div id="guard-profile" class="card bg-base-100 shadow-xl hidden">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-user text-accent mr-2"></i>
                    个人信息
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">工号</span>
                        </label>
                        <input type="text" value="M001" class="input input-bordered" readonly />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">姓名</span>
                        </label>
                        <input type="text" value="门卫张师傅" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">电话</span>
                        </label>
                        <input type="tel" value="13900139001" class="input input-bordered" />
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">新密码</span>
                        </label>
                        <input type="password" placeholder="留空则不修改" class="input input-bordered" />
                    </div>
                </div>

                <div class="card-actions justify-end mt-6">
                    <button class="btn btn-primary">
                        <i class="fas fa-save mr-2"></i>
                        保存修改
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer footer-center p-10 bg-base-200 text-base-content rounded mt-16">
    <div class="grid grid-flow-col gap-4">
        <a class="link link-hover" onclick="showAbout()">关于系统</a>
        <a class="link link-hover" onclick="showHelp()">使用帮助</a>
        <a class="link link-hover">技术支持</a>
    </div>
    <div>
        <p>雪里开简易预约制访客管理系统 V1.0</p>
        <p class="text-sm">本文来源：<a href="https://blog.csdn.net/YUJIANYUE/article/details/148594623" target="_blank" class="link link-primary">PHP7+MySQL5.6 雪里开简易预约制访客管理系统V1.0</a></p>
    </div>
</footer>

<!-- 模态框 -->
<!-- 访客码显示模态框 -->
<dialog id="visitor-code-modal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">访客码</h3>
        <div class="text-center">
            <div class="text-6xl font-mono text-primary mb-4" id="modal-visitor-code">V20250612001</div>
            <div class="text-sm text-gray-600 mb-4">请将此访客码提供给访客，用于门卫核销</div>
            <div class="bg-base-200 p-4 rounded-lg">
                <div class="text-sm space-y-1">
                    <div><strong>访客姓名:</strong> <span id="modal-visitor-name">王五</span></div>
                    <div><strong>到访日期:</strong> <span id="modal-visitor-date">2025-06-12</span></div>
                    <div><strong>目标宿舍:</strong> <span id="modal-visitor-room">A栋301</span></div>
                </div>
            </div>
        </div>
        <div class="modal-action">
            <form method="dialog">
                <button class="btn">关闭</button>
            </form>
        </div>
    </div>
</dialog>

<!-- 添加学生模态框 -->
<dialog id="add-student-modal" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">添加学生</h3>
        <div class="space-y-4">
            <div class="form-control">
                <label class="label">
                    <span class="label-text">学号</span>
                </label>
                <input type="text" placeholder="请输入学号" class="input input-bordered" />
            </div>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">姓名</span>
                </label>
                <input type="text" placeholder="请输入姓名" class="input input-bordered" />
            </div>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">电话</span>
                </label>
                <input type="tel" placeholder="请输入电话" class="input input-bordered" />
            </div>
            <div class="form-control">
                <label class="label">
                    <span class="label-text">初始密码</span>
                </label>
                <input type="password" placeholder="请输入初始密码" class="input input-bordered" />
            </div>
        </div>
        <div class="modal-action">
            <form method="dialog">
                <button class="btn btn-primary">添加</button>
                <button class="btn">取消</button>
            </form>
        </div>
    </div>
</dialog>

<script>
    // 全局变量
    let currentUser = null;
    let currentUserType = null;

    // 页面初始化
    document.addEventListener('DOMContentLoaded', function() {
        showHome();
        // 设置默认日期为今天
        const today = new Date().toISOString().split('T')[0];
        const dateInput = document.getElementById('visitor-date');
        if (dateInput) {
            dateInput.value = today;
        }
    });

    // 显示首页
    function showHome() {
        hideAllPages();
        document.getElementById('home-page').classList.remove('hidden');
    }

    // 显示登录页面
    function showLogin(userType) {
        hideAllPages();
        document.getElementById('login-page').classList.remove('hidden');

        const titles = {
            'admin': '系统管理员登录',
            'student': '学生登录',
            'guard': '门卡管理员登录'
        };

        const icons = {
            'admin': 'fas fa-cog',
            'student': 'fas fa-user-graduate',
            'guard': 'fas fa-shield-alt'
        };

        document.getElementById('login-title').textContent = titles[userType];
        document.getElementById('login-icon').className = icons[userType] + ' text-primary mr-2';
        currentUserType = userType;
    }

    // 处理登录
    function handleLogin() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;

        if (!username || !password) {
            showToast('请输入账号和密码', 'error');
            return;
        }

        // 模拟登录验证
        const validCredentials = {
            'admin': { 'admin': '123456' },
            'student': { 'S001': 'S001', 'S002': 'S002' },
            'guard': { 'M001': 'M001' }
        };

        if (validCredentials[currentUserType] &&
            validCredentials[currentUserType][username] === password) {
            currentUser = username;
            showToast('登录成功', 'success');

            // 跳转到对应页面
            setTimeout(() => {
                if (currentUserType === 'admin') {
                    showAdminPage();
                } else if (currentUserType === 'student') {
                    showStudentPage();
                } else if (currentUserType === 'guard') {
                    showGuardPage();
                }
            }, 1000);
        } else {
            showToast('账号或密码错误', 'error');
        }
    }

    // 显示管理员页面
    function showAdminPage() {
        hideAllPages();
        document.getElementById('admin-page').classList.remove('hidden');
        showAdminTab('students');
    }

    // 显示学生页面
    function showStudentPage() {
        hideAllPages();
        document.getElementById('student-page').classList.remove('hidden');
        showStudentTab('apply');
    }

    // 显示门卡管理页面
    function showGuardPage() {
        hideAllPages();
        document.getElementById('guard-page').classList.remove('hidden');
        showGuardTab('verify');
    }

    // 管理员选项卡切换
    function showAdminTab(tab) {
        // 隐藏所有管理员选项卡内容
        document.getElementById('admin-students').classList.add('hidden');
        document.getElementById('admin-visitors').classList.add('hidden');
        document.getElementById('admin-settings').classList.add('hidden');
        document.getElementById('admin-import').classList.add('hidden');

        // 显示选中的选项卡
        document.getElementById('admin-' + tab).classList.remove('hidden');

        // 更新选项卡样式
        document.querySelectorAll('#admin-page .tab').forEach(t => t.classList.remove('tab-active'));
        event.target.classList.add('tab-active');
    }

    // 学生选项卡切换
    function showStudentTab(tab) {
        // 隐藏所有学生选项卡内容
        document.getElementById('student-apply').classList.add('hidden');
        document.getElementById('student-history').classList.add('hidden');
        document.getElementById('student-profile').classList.add('hidden');

        // 显示选中的选项卡
        document.getElementById('student-' + tab).classList.remove('hidden');

        // 更新选项卡样式
        document.querySelectorAll('#student-page .tab').forEach(t => t.classList.remove('tab-active'));
        event.target.classList.add('tab-active');
    }

    // 门卡管理选项卡切换
    function showGuardTab(tab) {
        // 隐藏所有门卡管理选项卡内容
        document.getElementById('guard-verify').classList.add('hidden');
        document.getElementById('guard-records').classList.add('hidden');
        document.getElementById('guard-profile').classList.add('hidden');

        // 显示选中的选项卡
        document.getElementById('guard-' + tab).classList.remove('hidden');

        // 更新选项卡样式
        document.querySelectorAll('#guard-page .tab').forEach(t => t.classList.remove('tab-active'));
        event.target.classList.add('tab-active');
    }

    // 提交访客申请
    function submitVisitorApplication() {
        const name = document.getElementById('visitor-name').value;
        const phone = document.getElementById('visitor-phone').value;
        const room = document.getElementById('visitor-room').value;
        const date = document.getElementById('visitor-date').value;
        const reason = document.getElementById('visitor-reason').value;

        if (!name || !phone || !room || !date || !reason) {
            showToast('请填写所有必填项', 'error');
            return;
        }

        // 生成访客码
        const visitorCode = 'V' + new Date().toISOString().slice(0, 10).replace(/-/g, '') +
            String(Math.floor(Math.random() * 1000)).padStart(3, '0');

        showToast('访客申请提交成功，访客码：' + visitorCode, 'success');

        // 清空表单
        document.getElementById('visitor-name').value = '';
        document.getElementById('visitor-phone').value = '';
        document.getElementById('visitor-room').value = '';
        document.getElementById('visitor-reason').value = '';

        // 添加到历史记录表格
        addToHistoryTable(visitorCode, name, room, date);
    }

    // 添加到历史记录表格
    function addToHistoryTable(code, name, room, date) {
        const table = document.getElementById('student-history-table');
        const row = table.insertRow(0);
        row.innerHTML = `
                <td><span class="font-mono text-primary">${code}</span></td>
                <td>${name}</td>
                <td>${room}</td>
                <td>${date}</td>
                <td><span class="badge badge-warning">待核销</span></td>
                <td>
                    <button class="btn btn-ghost btn-xs" onclick="showVisitorCode('${code}')">查看访客码</button>
                </td>
            `;
    }

    // 显示访客码
    function showVisitorCode(code) {
        document.getElementById('modal-visitor-code').textContent = code;
        document.getElementById('visitor-code-modal').showModal();
    }

    // 验证访客码
    function verifyVisitorCode() {
        const code = document.getElementById('visitor-code-input').value;

        if (!code) {
            showToast('请输入访客码', 'error');
            return;
        }

        // 模拟查询访客信息
        if (code === 'V20250612001') {
            document.getElementById('verify-visitor-name').textContent = '王五';
            document.getElementById('verify-visitor-phone').textContent = '13800138005';
            document.getElementById('verify-student-name').textContent = '张三(S001)';
            document.getElementById('verify-room').textContent = 'A栋301';
            document.getElementById('verify-date').textContent = '2025-06-12';
            document.getElementById('verify-reason').textContent = '探望同学';

            document.getElementById('visitor-info').classList.remove('hidden');
            showToast('访客信息查询成功', 'success');
        } else {
            showToast('访客码不存在或已核销', 'error');
            document.getElementById('visitor-info').classList.add('hidden');
        }
    }

    // 确认核销
    function confirmVerification() {
        const code = document.getElementById('visitor-code-input').value;
        showToast('访客核销成功', 'success');

        // 清空输入和信息显示
        document.getElementById('visitor-code-input').value = '';
        document.getElementById('visitor-info').classList.add('hidden');

        // 添加到核销记录
        addToVerificationRecords(code);
    }

    // 添加到核销记录
    function addToVerificationRecords(code) {
        const table = document.getElementById('guard-records-table');
        const row = table.insertRow(0);
        const now = new Date().toLocaleString('zh-CN');
        row.innerHTML = `
                <td><span class="font-mono text-success">${code}</span></td>
                <td>王五</td>
                <td>张三(S001)</td>
                <td>A栋301</td>
                <td>${now}</td>
                <td>${currentUser}</td>
            `;
    }

    // 显示添加学生模态框
    function showAddStudentModal() {
        document.getElementById('add-student-modal').showModal();
    }

    // 退出登录
    function logout() {
        currentUser = null;
        currentUserType = null;
        document.getElementById('username').value = '';
        document.getElementById('password').value = '';
        showHome();
        showToast('已退出登录', 'info');
    }

    // 显示帮助
    function showHelp() {
        showToast('使用帮助：系统支持三种角色登录，请根据身份选择对应入口', 'info');
    }

    // 显示关于
    function showAbout() {
        showToast('雪里开简易预约制访客管理系统 V1.0 - 基于PHP7+MySQL5.6开发', 'info');
    }

    // 隐藏所有页面
    function hideAllPages() {
        document.getElementById('home-page').classList.add('hidden');
        document.getElementById('login-page').classList.add('hidden');
        document.getElementById('admin-page').classList.add('hidden');
        document.getElementById('student-page').classList.add('hidden');
        document.getElementById('guard-page').classList.add('hidden');
    }

    // 显示提示消息
    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        const typeClasses = {
            'success': 'alert-success',
            'error': 'alert-error',
            'warning': 'alert-warning',
            'info': 'alert-info'
        };

        toast.className = `alert ${typeClasses[type]} fixed top-4 right-4 w-auto max-w-sm z-50 shadow-lg`;
        toast.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'} mr-2"></i>
                    <span>${message}</span>
                </div>
            `;

        document.body.appendChild(toast);

        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
</script>
</body>
</html>